define(function(require,exports,module){
    'use strict';

    var React = require('react');
    var bootstrap = require('bootstrap');
    var RecordDataList = require('./RecordDataList');
    var Pager = require('components/partial/Pager');

    module.exports = React.createClass({
        render:function(){
            var list;

            if(this.props.data.length > 0){
                list = this.props.data.map(function(item){
                    return  <RecordDataList data={item} />
                });
            }

            return (
                <div className="modal fade" id={this.props.id} tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 className="modal-title" id="myModalLabel">记录详情</h4>
                            </div>
                            <form onSubmit={this.handleSubmit}>
                                <div className="modal-body">
                                    <table className="table table-striped table-bordered table-hover">
                                        <tbody>
                                            <tr>
                                                <th>记录时间</th>
                                                <th>消费时间</th>
                                                <th>金额</th>
                                                <th>分类</th>
                                                <th>备注</th>
                                            </tr>
                                            {list}
                                        </tbody>
                                    </table>
                                </div>
                                <div className="modal-body">
                                    <Pager {...this.props.pager_props}/>
                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            );
        }
    });
});